<!DOCTYPE html>
<html lang="en" style="height:100%">

<head>
	<meta charset="UTF-8">
	<meta name="viewport"
		content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>活跃度</title>
  <link rel="stylesheet" type="text/css" href="../../css/swiper.css">
	<link rel="stylesheet" href="../../css/weui.css">
	<link rel="stylesheet" type="text/css" href="../../css/api.css" />
	<link rel="stylesheet" type="text/css" href="../../css/style.css" />
	<link rel="stylesheet" type="text/css" href="../../css/yzl.css" />
	<link rel="stylesheet" href="../../css/vant.css">

	<!-- <link rel="stylesheet" href="../../css/BarlowCondensed-Bold.woff.ttf" /> -->
	<!-- <link rel="stylesheet" href="../../css/sqc.css"> -->
	<style>
	*{
		margin: 0;
		padding: 0;
	}
	input{

		outline:none;
	}
  .swiper-container {
  width: 100%;
  height: 100%;
}
.swiper-slide{
	text-align: center;
	overflow: hidden;
white-space:nowrap;
}
.swiper-slide span{
	padding:2px 12px;
	border: 1px solid #F85625;
	border-radius: 18px;
	overflow: hidden;
	white-space:nowrap;
}

.swiper-wrapper1 .swiper-slide-active{
  /*font-size: 18px;*/
  color: #F85625;
}
.choose_active span{
	color: #ffffff;
	background-color: #F85625
}
.swiper-wrapper2 .swiper-slide-active span{
  /*font-size: 18px;*/
  /*color: #ffffff;
	background-color: #F85625*/
}

/*.swiper-slide:not(.swiper-slide-active){
  transform: scale(0.8);
}*/
input{
	padding: 0px;
}
.swiper-pagination-bullet-active{
	background:#F95656;
}
.task{
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4);
position: fixed;
top: 40;
left: 0;
z-index: 20;
}
.van-dropdown-menu{
	height: 30px;
	display:inline-block;

}
[class*='van-hairline']::after {
    position: absolute;
    box-sizing: border-box;
    content: ' ';
    pointer-events: none;
    top: -50%;
    right: -50%;
    bottom: -50%;
    left: -50%;
    border: 0 solid #ffffff;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
}
.nav-item{
	display: inline-block;
	margin: 0px 20px;
}
.nav-item-active:after {
  content: '';
  position: absolute;
  left: 46%;
  top: auto;
  bottom: 0;
  right: auto;
  height: 3px;
  width: 4%;
  border-radius: 8px;
  background-color: #F85625;
}

	</style>
</head>

<body style="background:#F7F4F2;">

  <div id="app"  v-cloak>
	<div style="background:#ffffff;">
    <div class="shopsearch" >
      <!-- <div class="search_container">
        <img class="icon-search" src="../../image/search.png">
        <input placeholder="请输入“淘宝”内宝贝的标题或者链接" tapmode >
      </div> -->
			<van-search placeholder="请输入搜索关键词" v-model="keyword" @search="onSearch"/>
    </div>
    <div class="shop_filter">
			<van-dropdown-menu active-color="#ee0a24">
			  <van-dropdown-item v-model="value1" :options="option1" />
			  <!-- <van-dropdown-item v-model="value2" :options="option2" /> -->
			</van-dropdown-menu>
			<!-- <div>销量</div> -->
			<van-dropdown-menu active-color="#ee0a24">
				<!-- <van-dropdown-item v-model="value1" :options="option1" /> -->
				<van-dropdown-item v-model="value2" :options="option2" />
			</van-dropdown-menu>
    </div>
		<div class="shop_category">
			<div class="cate_before" style="float:left;">
				<img width="24px" src="../../image/cate.png" style="vertical-align:middle">
			</div>
			<!-- <div class="shop_cate shop_cate_items">
				<span></span>
			</div> -->
			<div style="float:right;width:92%;" class="swiper-container swiper-container2 swiper-container-horizontal swiper-container-free-mode" >
					<div class="swiper-wrapper swiper-wrapper2" style="transition-duration: 0ms;" >
							<div :class="{'choose_active':choose_index==index}" class="swiper-slide" v-for="(cate, index) in category_list" v-myclick="[index,change_cate]">
								<span >{{cate.name}}</span>
							</div>
					</div>
			</div>
			<div style="clear:both"></div>
		</div>

		<div class="shop_banner" style="height:auto;width:95%;margin:0 auto;margin-top:20px">
			<div class="swiper-container swiper-container3 swiper-container-horizontal">
		<div class="swiper-wrapper" style="transition-duration: 0ms;">
				<div class="swiper-slide"><img  src="../../image/demo4.jpg" style="width:100%"></div>
				<div class="swiper-slide"><img  src="../../image/demo1.jpg" style="width:100%"></div>
				<div class="swiper-slide"><img  src="../../image/demo3.jpg" style="width:100%"></div>
		</div>
		<div class="swiper-pagination swiper-pagination3"></div>

</div>
		</div>
	</div>
	<div class="goods" >
		<div class="item" v-for="(good, index) in goods" v-myclick="[good.coupon_url,getcoupon]">
			<div class="goods_pic">
			<img :src="good.pic.indexOf('http') ==-1?'http://'+good.pic:good.pic" :key="index">
			</div>
			<p class="list-title">
				{{good.title}}
			</p>
			<div class="pricecommon">
				<div class="price_prime" style="float:left">￥{{good.prime}}</div>
				<div class="couponed_price" style="float:right">2.3万成交</div>
				<div style="clear:both"></div>
			</div>
			<div class="after_coupon">
			 用券后<span style="color:#F85625">￥{{good.price}}</span>
			</div>
			<div class="get_coupon">
				<span class="coupon_frist">{{good.score}}元券</span>
				<span class="coupon_last" >领取</span>
			</div>
		</div>
	</div>
			</div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/vue.js"></script>
<script src="../../script/app.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/url.js"></script>
<script src="../../script/components.js"></script>
<script src="../../script/jquery.js"></script>
<script src="../../script/swiper.js"></script>
<script src="../../script/vant.min.js"></script>
<script src="../../script/axios.min.js"></script>
<script>
var swiper;
var category_list;
apiready = function () {
    setBSImg();
    // showProgress();
    // wx = api.require('wx');
    // qq = api.require('QQPlus');
    api.setStatusBarStyle({style: 'dark', color: ''});
		var data = {
						shop_type_id:3,
		};
		showProgress();
		axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';
		axios.defaults.headers['pid'] = 'qhr';
		axios.post(shopapiroot+'app/goods/get_categories',data).then(function (res) {
			if(res.data.errcode==0){
				category_list = res.data.content;
				initApp(category_list);
				hideProgress();
			}else{
				hideProgress();
				alert(res.data.message)
			}
		});
    // initApp();
    // $api.fixTabBar($api.byId('footer'));
    addListeners();
    api.parseTapmode();
};
function initApp(categorys) {
    vm = new Vue({
        el: '#app',
        data: {
            BSImg: Vue.BSImg,
            showModal: false,
						modal:true,
            plat_type:1,
						value:'',
						show:true,
						selected_index:0,
						category_id:1,
						category_code:'0000',
						value1: 1,
						value2: 0,
						choose_index:0,
						keyword:'',
						option1: [
							{ text: '全部折扣', value: 1 },
							{ text: '90%折扣', value: 2 },
							{ text: '80%折扣', value: 3 },
							{ text: '70%折扣', value: 4 }
						],
						option2: [
							{ text: '价格排序', value: 0 },
							{ text: '抵扣额度最高', value: 1 },
							{ text: '价格由高到低', value: 2 },
							{ text: '价格由低到高', value: 3 },
						],
						check_active:false,
            plat_arr:["jd","tb","pdd"],
						category_list:categorys,
						goods:{},
						shop_type_id:3,
						platindex:1
        },
				mounted:function(){
					this.change_cate(0);
					// swiper();
					swiper1();
					swiper2();
				},
				created: function() {
					},

        methods: {
              goindex:function () {
            },
						onSearch:function(){
							var data = {
								category_id:this.category_id,
								shop_type_id:this.shop_type_id,
								keyword:this.keyword,
								code:this.code,
								uid:getPrefs('member_id')?getPrefs('member_id'):1
							}
							axios.post(shopapiroot+'app/goods/get_goods',JSON.stringify(data)).then(function (res) {
								if(res.data.errcode==0){
									vm.goods = res.data.content.searchResult;
								}else{
									hideProgress();
									alert(res.data.message)
								}
							});
						},
						getcategory:function(){
						},
						getcoupon:function(url){
							var data = {
								wxOpenId: getPrefs('openid'),
								token: getPrefs('token')
							}
							var callback = function (ret) {
								api.sendEvent({
										name: 'switch_to_frame_3',
								});
								if(api.systemType == 'android'){
									api.openApp({
											uri: url,
								 });
								}
								if(api.systemType == 'ios'){
									api.openApp({
											iosUrl: url,
									});
								}
							};
							var errback = function (err) {
								alert(err.message)
							}
							pinet.post(APIURLP+'/play/synchr/goods', data, callback, errback);

						},
						change_platform:function(index){
							showProgress();
							vm.platindex = index;
							this.shop_type_id = index+2;
							var data = {
											shop_type_id:index+2,
							};
							axios.post(shopapiroot+'app/goods/get_categories',data).then(function (res) {
								if(res.data.errcode==0){
									vm.category_list = res.data.content;
									vm.change_cate(0);
									hideProgress();
								}else{
									hideProgress();
									alert(res.data.message)
								}
							});
						},
						change_cate:function(index){
							var choose_id = this.category_list[index].category_id;
							var code = this.category_list[index].code;
							this.choose_index = index;
							this.category_id = choose_id;
							this.category_code = code;
							if(index!=0){
								swiper1.slideTo(index-1, 1000, false);
							}
							var data = {
								category_id:choose_id,
								code:code,
								shop_type_id: this.shop_type_id,
							}

							axios.post(shopapiroot+'app/goods/get_goods',JSON.stringify(data)).then(function (res) {
								if(res.data.errcode==0){
									vm.goods = res.data.content.searchResult;
								}else{
									hideProgress();
									alert(res.data.message)
								}
							});

						},
						getgoods:function(){

						},
						taskPanel: function (){
							this.check_active =!this.check_active;
						},
						show_pick:function(){
							this.check_active =!this.check_active;

						},
            checkgoindex:function(type){


            }
        },
				watch: {
					value1: function (newvalue1) {
						var data = {
							category_id:this.category_id,
							shop_type_id:this.shop_type_id,
							coupon_type:newvalue1,
							code:this.code,
							uid:getPrefs('member_id')
						}
						axios.post(shopapiroot+'app/goods/get_goods',JSON.stringify(data)).then(function (res) {
							// console.log(JSON.stringify(res));
							if(res.data.errcode==0){
								vm.goods = res.data.content.searchResult;
							}else{
								hideProgress();
								alert(res.data.message)
							}
						});
					},
					value2: function (newvalue2) {
						var data = {
							category_id:this.category_id,
							shop_type_id:this.shop_type_id,
							sort_type:newvalue2,
							code:this.code,
							uid:getPrefs('member_id')
						}
						axios.post(shopapiroot+'app/goods/get_goods',JSON.stringify(data)).then(function (res) {
							// console.log(JSON.stringify(res));
							if(res.data.errcode==0){
								vm.goods = res.data.content.searchResult;
							}else{
								hideProgress();
								alert(res.data.message)
							}
						});
					},
				},
    });
}
function swiper(){
   swiper = new Swiper('.swiper-container1', {
    slidesPerView: 3,
    spaceBetween: 30,
  centeredSlides: true,
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },
    on: {
      slideChangeTransitionEnd: function(){
				vm.change_platform(swiper.activeIndex)
      },
    },
  });
  swiper.slideTo(1, 1000, false);
}
// function changeposition(index){
// }
function swiper1() {
	swiper1 = new Swiper('.swiper-container2', {
	slidesPerView: 3.5,
	paginationClickable: true,
	spaceBetween: 0,
	freeMode: true,
	resistanceRatio: 0,
});
}
function swiper2() {
	swiper2 = new Swiper('.swiper-container3', {
		pagination: '.swiper-pagination3',
		paginationClickable: true
});
}

function addListeners(){
	api.addEventListener({
	    name: 'change_platform'
	}, function(ret, err){
		var index  = ret.value.index;
		vm.change_platform(index)
	});

}
</script>

</html>
